<template>
  <div>
    <common-card title="累计订单量" :value="orderToday">
      <template>
        <v-chart :options="getOptions()"></v-chart>
        <!-- <div
          id="total-orders-chart"
          :style="{ width: '100%', height: '100%' }"
        ></div> -->
      </template>
      <template v-slot:footer>
        <span>昨日订单量</span>
        <span class="money">{{ orderLastDay }}</span>
      </template>
    </common-card>
  </div>
</template>

<script>
import CommonCardMixin from "@/mixins/CommonCardMixin";
import CommonDataMixin from "@/mixins/CommonDataMixin";
export default {
  mixins: [CommonCardMixin,CommonDataMixin],
  methods: {
    getOptions() {
      return this.orderTrend.length > 0? {
        xAxis: {
          type: "category",
          show: false,
          boundaryGap: false,
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            type: "line",
            data: this.orderTrend,
            areaStyle: {
              //显示面积
              color: "purple",
            },
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              opacity: 0,
            },
            smooth: true,
          },
        ],
        //   位置
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
        },
      }:null;
    },
  },
};
</script>

<style>
</style>